<template>
    <div class="w">
        <div class="filterConditions">
            <div class="filter_top">
                <div class="filter_top_1">筛选条件:</div>
                <div v-for="item in Conditions" :key="item.id" @click="tagsLietc(item.id)">
                    <span class="filter_cont" :class="{ activeTions: conditions == item.id }">{{ item.name }}</span>
                </div>
            </div>
            <div class="filter_button">
                <div class="empty" @click="empty">清空<el-icon :size="12" color="#D72A07">
                        <Delete />
                    </el-icon></div>
                <div class="digital" @click="putAway">收起<el-icon :size="12" color="#3270D3">
                        <Delete />
                    </el-icon></div>
            </div>
        </div>
        <div style="border: 1px solid #EEEEEE ;">
            <div class="filter_contx">
                <div class="filter_contx_box" v-for="item in secondaryLast" :key="item.id" @click="tagsTwo(item.id)">
                    <span :class="{ activeTions: secondaryIndex == item.id }">{{ item.name }}</span>
                </div>
            </div>
            <div class="filter_button">
                <div class="filter_button_box" v-for="item in secondaryLast" :key="item.id" @click="tagsThree(item.id)">
                    <span :class="{ activeTions: tertiaryIndex == item.id }">{{ item.name }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
// 条件筛选高亮
const conditionsIndex = '0'
let conditions = ref(conditionsIndex)
let conditionIndex = ref('0')
let filterTions = [
    {
        id: '0',
        name: '全部'
    },
    {
        id: '1',
        name: '工程'
    },
    {
        id: '2',
        name: '货物'
    },
    {
        id: '3',
        name: '服务'
    },
]
let Conditions = ref(filterTions)
const tagsLietc = (id) => {
    conditions.value = id
    conditionIndex.value = id

}

// 清空
const empty = () => {
    console.log('清空')
}
// 收起
const putAway = () => {
    console.log('收起')
}
// 二级
let secondary = '0'
let secondarys = ref(secondary)
let secondaryIndex = ref('0')
let secondaryLiss = [
    {
        id: "0",
        name: '全部'
    },
    {
        id: "1",
        name: '农牧林渔业'
    },
    {
        id: "2",
        name: '采矿和采石'
    },
    {
        id: "3",
        name: '制造业'
    },
    {
        id: "4",
        name: '电、煤气、蒸汽和空调供应'
    },
    {
        id: "5",
        name: '污水处理、废物管理和补救'
    }, {
        id: "6",
        name: '建筑业'
    }, {
        id: "7",
        name: '农牧林渔业'
    },
    {
        id: "8",
        name: '农牧林渔业'
    },
    {
        id: "9",
        name: '农牧林渔业'
    },
    {
        id: "9",
        name: '农牧林渔业'
    },
    {
        id: "9",
        name: '农牧林渔业'
    },
    {
        id: "9",
        name: '农牧林渔业'
    },
    {
        id: "9",
        name: '农牧林渔业'
    },
]
let secondaryLast = ref(secondaryLiss)
const tagsTwo = (id) => {
    secondarys.value = id
    secondaryIndex.value = id
}

// 三级 tertiary 
let tertiary = '0'
let tertiarys = ref(tertiary)
let tertiaryIndex = ref('0')
let tertiaryLiss = [

]
let tertiaryLast = ref(tertiaryLiss)
const tagsThree = (id) => {
    tertiarys.value = id
    tertiaryIndex.value = id
}
</script>
<style lang="scss" scoped>
.w {
    width: 75vw;
    margin: 0 auto;
}

.activeTions {
    padding: 1px 5px;
    background-color: #3270D3;
    color: aliceblue;
    border-radius: 5px;
    font-size: 14px;
}

.filterConditions {
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .filter_top {
        display: flex;
        align-items: center;

        .filter_top_1 {
            padding-right: 23px;
        }

        .filter_cont {
            margin-right: 15px;
            font-size: 14px;
        }
    }

    .filter_button {
        display: flex;
        align-items: center;

        .empty {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 58px;
            height: 24px;
            margin-right: 10px;
            background-color: #EEEEEE;
            border-radius: 5px;
            color: #D72A07;
            font-size: 13px;
        }

        .digital {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 58px;
            height: 24px;
            background-color: #EEEEEE;
            border-radius: 5px;
            color: #3270D3;
            font-size: 13px;
        }
    }
}

.filter_contx {
    display: flex;
    flex-wrap: wrap;
    height: 4.875vw;
    background-color: #EEEEEE;
    padding: 10px 0 0 90px;

    .filter_contx_box {
        margin-right: 15px;
        font-size: 14px;
    }
}

.filter_button {
    display: flex;
    flex-wrap: wrap;
    height: 4.875vw;
    padding: 10px 0 0 90px;

    .filter_button_box {
        margin-right: 15px;
        font-size: 14px;
    }
}
</style>